<template>
    <div>
        <!-- 添加 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="openType()">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table size="small" :data="ListData" highlight-current-row v-loading="loading" element-loading-text="拼命加载中"
            style="width: 100%;">
            <el-table-column align="center" sortable prop="name" label="类型名称" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="price" label="价格" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.price / 10000 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="servicePrice" label="服务费价格" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.servicePrice / 10000 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="160">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="400">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="openType(scope.row)">修改</el-button>
                    <el-button size="mini" type="primary" @click="deleType(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑界面 -->
        <el-dialog :title="tit" :visible.sync="editFormVisiible" width="40%">
            <el-form label-width="120px">
                <el-form-item label="类型名称">
                    <el-input size="small" v-model="name" auto-complete="off" placeholder="请输入类型名称"></el-input>
                </el-form-item>
                <el-form-item label="电费价格">
                    <el-input size="small" v-model="price" auto-complete="off" placeholder="请输入电费价格1"></el-input>
                </el-form-item>
                <el-form-item label="服务费价格">
                    <el-input size="small" v-model="servicePrice" auto-complete="off" placeholder="请输入服务费价格"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addType()"
                    v-if="tit == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upType()"
                    v-if="tit == '修改'">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getChargePriceTypeList,
    addChargePriceType,
    deleteChargePriceType,
    upChargePriceType
} from '../../api/userMG'
export default {
    data() {
        return {
            editFormVisiible: false,
            stationId: this.$route.query.id,
            loading: false,
            tit: '添加',
            ListData: [],
            name: '',
            price: '',
            servicePrice: '',
            props: ['propName']
        }
    },
    created() {
        this.getPrice(1)
    },
    methods: {
        // 删除
        deleType(row) {
            this.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                let data = {
                    id: row.id
                }
                deleteChargePriceType(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.getPrice(1)
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 修改
        upType() {
            this.loading = true
            this.price = (this.price * 10000).toFixed(0)
            this.servicePrice = (this.servicePrice * 10000).toFixed(0)
            upChargePriceType({
                id: this.id,
                name: this.name,
                price: this.price,
                servicePrice: this.servicePrice,
                stationId: this.stationId
            }).then((res) => {
                if (res.code == 200) {
                    this.loading = false
                    this.$message.success(res.msg)
                    this.editFormVisiible = false
                    this.getPrice(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg)
                }
            })
        },
        // 添加
        addType() {
            this.loading = true
            this.price = (this.price * 10000).toFixed(0)
            this.servicePrice = (this.servicePrice * 10000).toFixed(0)
            addChargePriceType({
                name: this.name,
                price: this.price,
                servicePrice: this.servicePrice,
                stationId: this.stationId,
            }).then((res) => {
                if (res.code == 200) {
                    this.loading = false
                    this.$message.success(res.msg)
                    this.editFormVisiible = false
                    this.getPrice(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg)
                }
            })
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        //打开编辑页面
        openType(row) {
            this.editFormVisiible = true;
            if (row != undefined && row != "undefined") {
                this.tit = "修改"
                this.id = row.id
                this.name = row.name
                this.price = row.price / 10000
                this.servicePrice = row.servicePrice / 10000
                this.stationId = this.stationId
            } else {
                this.tit = "添加"
                this.name = ""
                this.price = ""
                this.servicePrice = ""
                this.stationId = this.stationId
            }
        },
        // 获取列表数据
        getPrice(page) {
            this.loading = true;
            getChargePriceTypeList({
                stationId: this.stationId,
                page: (page - 1) * 20,
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.ListData = res.data.list;
                    return;
                } else {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    })
                }
            })
        }
    }
}
</script>

<style></style>